<template>
    <div class="da_tu"></div>
    <div class="chanpin_jian_ge"></div>
    <div class="zhong_xin_content">
        <div class="zhong_xin_center">
            <div class="center_option">

                <div class="chanpin">
                    磨床产品
                </div>

                <div class="chanpin_item">

                    <div @click="change_item('平面')">
                        平面磨床
                    </div>
                    <div @click="change_item('数控')">
                        数控磨床
                    </div>
                    <div @click="change_item('精密')">
                        精密磨床
                    </div>
                    <div @click="change_item('自动')">
                        自动磨床
                    </div>
                    <div @click="change_item('手动')">
                        手动磨床
                    </div>

                </div>

                <div class="peijian" @click="change_item('配件')">
                    磨床配件
                </div>

                <div class="dianhua">
                    <div class="dianhua_icon"></div>
                    <div class="dianhua_content">
                        <div class="dianhua_text">咨询热线：</div>
                        <div class="dianhua_number">18058427721</div>
                    </div>
                </div>

            </div>

            <div class="center_item">
                <div v-if="item_select === '配件'" class="chanpin_peijian">
                    <div class="row_1">
                        <div @click.stop="to_detail">
                            <div class="peijian_img"></div>
                            <div class="peijian_content">
                                <div class="peijian_content_message">PSG-250CNS数控成型磨床</div>
                                <div class="peijian_content_icon"></div>
                            </div>
                        </div>
                        <div @click.stop="to_detail">
                            <div class="peijian_img"></div>
                            <div class="peijian_content">
                                <div class="peijian_content_message">PSG-250CNS数控成型磨床</div>
                                <div class="peijian_content_icon"></div>
                            </div>
                        </div>
                        <div @click.stop="to_detail">
                            <div class="peijian_img"></div>
                            <div class="peijian_content">
                                <div class="peijian_content_message">PSG-250CNS数控成型磨床</div>
                                <div class="peijian_content_icon"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row_1">
                        <div @click.stop="to_detail">
                            <div class="peijian_img"></div>
                            <div class="peijian_content">
                                <div class="peijian_content_message">PSG-250CNS数控成型磨床</div>
                                <div class="peijian_content_icon"></div>
                            </div>
                        </div>
                        <div @click.stop="to_detail">
                            <div class="peijian_img"></div>
                            <div class="peijian_content">
                                <div class="peijian_content_message">PSG-250CNS数控成型磨床</div>
                                <div class="peijian_content_icon"></div>
                            </div>
                        </div>
                        <div @click.stop="to_detail">
                            <div class="peijian_img"></div>
                            <div class="peijian_content">
                                <div class="peijian_content_message">PSG-250CNS数控成型磨床</div>
                                <div class="peijian_content_icon"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row_1">
                        <div @click.stop="to_detail">
                            <div class="peijian_img"></div>
                            <div class="peijian_content">
                                <div class="peijian_content_message">PSG-250CNS数控成型磨床</div>
                                <div class="peijian_content_icon"></div>
                            </div>
                        </div>
                        <div @click.stop="to_detail">
                            <div class="peijian_img"></div>
                            <div class="peijian_content">
                                <div class="peijian_content_message">PSG-250CNS数控成型磨床</div>
                                <div class="peijian_content_icon"></div>
                            </div>
                        </div>
                        <div @click.stop="to_detail">
                            <div class="peijian_img"></div>
                            <div class="peijian_content">
                                <div class="peijian_content_message">PSG-250CNS数控成型磨床</div>
                                <div class="peijian_content_icon"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row_1">
                        <div @click.stop="to_detail">
                            <div class="peijian_img"></div>
                            <div class="peijian_content">
                                <div class="peijian_content_message">PSG-250CNS数控成型磨床</div>
                                <div class="peijian_content_icon"></div>
                            </div>
                        </div>
                        <div @click.stop="to_detail">
                            <div class="peijian_img"></div>
                            <div class="peijian_content">
                                <div class="peijian_content_message">PSG-250CNS数控成型磨床</div>
                                <div class="peijian_content_icon"></div>
                            </div>
                        </div>
                        <div @click.stop="to_detail">
                            <div class="peijian_img"></div>
                            <div class="peijian_content">
                                <div class="peijian_content_message">PSG-250CNS数控成型磨床</div>
                                <div class="peijian_content_icon"></div>
                            </div>
                        </div>
                    </div>

                    <div class="fen_ye">
                        <el-pagination
                                background
                                layout="pager"
                                :total="70"
                                @current-change="current_change(current_page)"
                                v-model:currentPage="current_page"
                                @click="test(current_page)">
                        </el-pagination>
                    </div>

                </div>

                <div v-else-if="item_select === '平面'">
                    平面
                </div>

                <div v-else-if="item_select === '数控'">
                    数控
                </div>

                <div v-else-if="item_select === '精密'">
                    精密
                </div>

                <div v-else-if="item_select === '自动'">
                    自动
                </div>

                <div v-else-if="item_select === '手动'">
                    手动
                </div>

                <div v-else-if="item_select === 'detail'" style="margin-left: 31px;">
                        <detail></detail>
                </div>

            </div>

        </div>



        <dibu></dibu>
    </div>

</template>

<script>
    import toubu from '../../components/toubu.vue'
    import dibu from '../../components/dibu.vue'
    import detail from '../../components/chanpin_detail.vue'

    import {ref,onMounted,onUnmounted} from 'vue'
    import {useStore}from 'vuex'
    export default {
        name: "chanpinzhongxin",
        components: {
            toubu,
            dibu,
            detail,
        },
        setup(){
            const store=useStore();
            const item_select=ref('配件');
            const current_page=ref('');

            onMounted(()=>{
                store.state.emitter.on("change_chanpin_left",res=>{
                    switch (res) {
                        case '产品':
                            item_select.value='平面';
                            break;
                        case '配件':
                            item_select.value='配件';
                            break;
                    }
                })
            })

            onUnmounted(()=>{
                store.state.emitter.off("change_chanpin_left",()=>{
                    console.log("结束监听");
                });
            })

            const to_detail=()=>{
                item_select.value='detail';
                console.log("到详情页");
            }

            const change_item=item=>{
                item_select.value=item;
            }

            const test=item=>{
                console.log("点击了",item);
            }

            const current_change=()=>{
                console.log("改变了当前页",current_page);
            }

            return{
                item_select,
                change_item,
                store,
                test,
                current_page,
                current_change,
                to_detail,
            }
        },
    }
</script>

<style scoped>
    .zhong_xin_content{width: 100%;background-color: #f6f6f6;}
    .da_tu{width: 100%;height: 339px;background: url("http://120.78.80.190/da_tu_2.png");background-size: 100% 100%;background-repeat: no-repeat;}
    .chanpin_jian_ge{width: 100%;height: 58px;background-color: #f6f6f6;}
    .zhong_xin_center{width: 1203px;margin: 0px auto;display: flex;flex-direction: row;}
    .center_option{width: 269px;}
    .chanpin{width: 100%;height: 103px;background: url("http://120.78.80.190/product2.png");background-size: 100% 100%;background-repeat: no-repeat;font-size: 30px;text-align: center;line-height: 103px;color: white;cursor: pointer;}
    .chanpin_item{margin-top: 11px;width: 100%;height: 324px;display: flex;flex-direction: column;justify-content: space-between;}
    .chanpin_item>div{width: 267px;height: 55px;background-color: #ffffff;font-size: 16px;line-height: 55px;text-align: center;color: #2e5fab;cursor: pointer;border: 1px solid #cccccc;border-bottom: 2px solid #cccccc;}
    .peijian{width: 269px;height: 103px;margin-top: 14px;background: url("http://120.78.80.190/product2.png");font-size: 30px;line-height: 103px;text-align: center;color: white;cursor: pointer;}
    .center_item{}
    .chanpin_peijian{margin-left: 18px;width: 915px;height: 803px;display: flex;flex-direction: column;justify-content: space-between;}
    .row_1{width: 100%;display: flex;flex-direction: row;justify-content: space-between;}
    .row_1>div{width: 290px;height: 182px;background-color: #ffffff;cursor: pointer;}
    .peijian_img{width: 266px;height: 127px;margin: 9px auto;background: url("http://120.78.80.190/chanpin_tu.png");background-size: 100% 100%;background-repeat: no-repeat;}
    .peijian_content{width: 266px;margin: 17px auto;display: flex;flex-direction: row;height: 16px;justify-content: space-between;}
    .peijian_content_message{height: 16px;margin-left: 5px;font-size: 16px;line-height: 16px;}
    .peijian_content_icon{width: 11px;height: 16px;background: url("http://120.78.80.190/product3.png");background-size: 100% 100%;background-repeat: no-repeat;}

    .dianhua{margin-top: 15px;width: 267px;height: 90px;border: 1px solid #cccccc;background: url("http://120.78.80.190/product1.png");background-size: 100% 100%;background-repeat: no-repeat;display: flex;flex-direction: row;}
    .dianhua_icon{width: 43px;height: 43px;background: url("http://120.78.80.190/dianhua.png");background-size: 100% 100%;background-repeat: no-repeat;margin-top: 29px;margin-left: 26px;}
    .dianhua_content{height: 53px;display: flex;flex-direction: column;justify-content: space-between;margin-top: 19px;margin-left: 14px;color: #fffeff;}
    .dianhua_text{font-size: 18px;line-height: 18px;}

    .fen_ye{margin-top: 27px;margin-left: 292px;}
</style>